<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>知识竞赛Pk</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
		<link rel="stylesheet" href="css/pkRecord.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/moduls/pk.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/adapter.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>

	<body>
		<div class="content">
			<div class="logo">
				<img src="img/logo.png" />
			</div>
			<div class="theme">
				<img src="img/theme.png" />
			</div>
			<div class="subTop">
				<div class="picture">
					<img src="img/title2.png" />
				</div>

			</div>
			<div class="back">
				<div class="backBtn">
					<a href="javascript:history.go(-1)"><img src="img/closeBtn.png" /></a>
				</div>

			</div>
			<div class="middlePath">
				<div class="title">
					<img src="img/myPK.png" alt="">
				</div>
				<div class="line">
					<img src="img/line.png" alt="">
				</div>
				<div class="midContent" style="color: #A10E00;">
					<div class="state">状态筛选</div>
					<!--<div class="statusChose" style="position: absolute;"></div>-->
					<div class="win">胜负筛选</div>
					<!--<div class="statusChose"></div>-->
					

				</div>
				<div class="tableContent">
					<div class="innerTab">
						<table style="border-collapse:collapse">
							<thead>
								<tr>
									<td class="active" style="width: 1.03rem;">对象</td>
									<td style="width: 0.8rem;">状态</td>
									<td style="width: 0.8rem;">比分</td>
									<td style="width: 0.8rem;">胜负</td>
									<td style="width: 0.84rem;">荷花数</td>
									<td style="width: 1.08rem;">时间</td>
								</tr>
							</thead>
						</table>

					</div>

					<div class="innerTab2">
						<table style="border-collapse:collapse">
							<tbody>
								<tr v-for="(record,index) in records" :key="index">
									<td style="width: 0.98rem;">
										<div class="avatar" style="width: 0.3rem;margin: 0 auto;"><img :src="record.avatar" style="border-radius: 50%;"/></div>
										<div style="width: 0.98rem;overflow: hidden;">{{record.rivaId}}</div></td>
									<td style="width: 0.82rem;">{{record.status}}</td>
									<td style="width: 0.78rem;">{{record.scores}}</td>
									<td style="width: 0.8rem;">{{record.result}}</td>
									<td style="width: 0.84rem;">{{record.lotusNum}}</td>
									<td style="width: 1.08rem;">{{record.createdAt}}</td>
								</tr>
							</tbody>
						</table>

					</div>

				</div>
				<div class="page">
					<!--<span>页码</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>-->
				</div>

				<div class="bottom-logo">
					<img src="img/bottom_logo2.png" />
				</div>
			</div>
		</div>

	</body>
	<script>
		function getPara(_key) {
			var reg = new RegExp("(^|&)" + _key + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if(r != null) return unescape(r[2]);
			return null;
		}
		var id = getPara("teamId") || 1;
		var t_skey = getPara("skey") || "chomoo_test_001";
		var app = new Vue({
			el: '.content',
			data: {

				records: []

			}

			
		})
		
		//我的知识竞赛pk
			getPkInfo(t_skey,function(_res){
				app.records=_res.data
			})
	</script>

</html>